<script setup>
  import { ref } from 'vue'
 const services = ref([
	{name:'最新资讯',icon:'/static/icons/news.png',path:'/pages/news/news'} ,
   { name: '我的足迹', icon: '/static/icons/footprint.png',path:'/pages/footprint/footprint' },
   { name: '积分商城', icon: '/static/icons/mall.png',path:'/pages/point-mall/point-mall' },
   { name: '环保知识', icon: '/static/icons/knowledge.png',path:'/pages/knowledge/knowledge' },
   { name: '绿色行动', icon: '/static/icons/action.png' ,path:'/pages/green-action/green-action'},
   { name: '社区', icon: '/static/icons/community.png',path:'/pages/community/index' }
 ])
 
 // 跳转到指定页面
 const navigateTo = (path) =>{
	console.log(path)
	uni.navigateTo({
		url: path
	})
 }
</script>

<template>
	<!-- 顶部 -->
  <view class="eco-home">
		<view class="location-bar" >
			<image src="/static/images/logo.png" mode="aspectFill" class="image"></image>
			<u-icon name="map-fill" color="#000000" size="60"></u-icon>
			<text>广东省广州市天河区</text>
		</view>  
		<!-- 导航字 -->
		<view class="banner-section">
			<view class="banner-title">助力分类-美丽家园</view>
			<view class="stats-box">
				<text class="stats-text">你已经参与垃圾分类0元，累计投放50kg</text>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="swiper-container">
			<swiper circular="true" indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper" >
				<swiper-item>
					<image src="/static/images/swiper1.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/images/swiper2.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/images/swiper3.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 常见服务 -->
		<view class="service-header">
			<view class="line-direction"></view>
			<view class="service-title">
				<view class="service-title-item">常</view>
				<view class="service-title-item">见</view>
				<view class="service-title-item">服</view>
				<view class="service-title-item">务</view>
			</view>
			<view class="line-direction"></view>
		</view>
		<!-- 列表 -->
		<view class="section">
			<view class="section-area" v-for="(item,index) in services" :key="index" @click="navigateTo(item.path)"> 
				<image :src="item.icon" mode="aspectFill" class="section-images"></image>
				<text class="section-title">{{item.name}}</text>
			</view>
		</view>
	</view>	
</template>

<style scoped lang="scss">
	.eco-home{
		overflow-y: scroll;
		.location-bar{
			display: flex;
			padding: 0 20rpx;
			align-items: center;
			
			.image{
				width: 100rpx;
				height: 100rpx;
				margin-right: 10rpx;
			}
			text{
				font-size: 40rpx;
				font-weight: bold;
				// 字体倾斜
				font-style: italic;
				color: #000000;
				margin-left: 10rpx;
			}
		}
		.banner-section {
			padding: 0 20rpx;
		  padding-bottom: 30rpx;
		  .banner-title {
			line-height: 100rpx;
		    font-size: 50rpx;
		    font-weight: bold;
			font-style: italic;
		  }
		  
		  .stats-box {
			padding-left: 16rpx;
		    .stats-text {
		      font-size: 28rpx;
			  color: #000;
		    }
		  }
		}
		.swiper-container{
			padding: 0 20rpx;
			.swiper{
				width: 100%;
				height: 300rpx;
				padding-bottom: 40rpx;	
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.swiper{
				width: 100%;
				height: 300rpx;
				padding-bottom: 40rpx;	
				overflow: hidden;
				.section-images{
					width: 100%;
					height: 100%;
				}
			}
		}
		.service-header{
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 20rpx;
			.line-direction{
				width: 100rpx;
				height: 8rpx;
				background-color: #BBBBBB;
				margin: 0 20rpx;
				
			}
			.service-title{
				flex: 1;
				display: flex;
				justify-content: space-between;
				.service-title-item{
					width: 70rpx;
					height: 70rpx;
					background: #fff;
					line-height: 70rpx;
					text-align: center;
					font-size: 36rpx;
					color: #333;
					font-weight: bold;
					border: none;
					border-radius: 50%;
				}
			}
		}
		.section{
			display: grid;
			grid-template-columns: repeat(3,1fr);
			gap: 20rpx;
			margin-top: 60rpx;
			// background: #fff;
			.section-area{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;
				.section-images{
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
	
</style>
